<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<!--表单是交互区域，收集用户输入数据,disabled就会禁用表单控建，不允许在输入-->
<div>
    <!--        action就是说表单交由谁处理,点击一个button就会提交了(button的type默认是submit) ,所以通常不用action,而是自己写提交 -->
    <!--        target 默认_self就是不跳转  method 写get post等，默认是get  ?x=a&y=b 这样拼接的表单后端要requestParam -->
    <form action="http://localhost:8080/test/test2" target="_blank">
        <!--            利用fieldset 和legend分类,了解就行-->
        <fieldset style="width: 500px">
            <legend>主要信息</legend>
            <!--            name需要与后端人员沟通后确定,value就是里面的值, -->
            账户：<input type="text" name="account" maxlength="10"> <br>
            密码：<input type="password" name="password" value="" maxlength="10"> <br>
            <!--            使用name把radio划分到一组，这样就成了单选,value必须要有，否则传过去就是on了-->
            性别：<label>男<input type="radio" name="gender" value="1"></label> 女<input type="radio" name="gender"
                                                                                        value="2"> <br>


        </fieldset>
        <fieldset style="width: 500px">
            <legend>额外信息</legend>
            <!--            checked就是默认勾选,最后拼接会有多个hobby,要进行一下处理,不然后端拿的是一个值-->
            爱好：<label>抽烟<input type="checkbox" name="hobby" value="1" checked></label> <label>喝酒<input
                type="checkbox" name="hobby" value="2"></label> <label>玩游戏<input type="checkbox" name="hobby"
                                                                                    value="3"></label> <br>
            <!--            type=hidden 隐藏域,隐藏但随表单提交 -->
            <input type="hidden" name="hiddenV" value="hiddenV-1">

            <!--            文本域,c和r控制着列数与行数-->
            其他：<textarea cols="20" rows="10" name="other"></textarea><br>
            籍贯：
            <!--            下拉框 select,写name,option写value ,name就会把value传过去,默认选中第一个，selected会默认选中 -->
            <select name="jg">
                <option value="o1">1</option>
                <option value="o2" selected>2</option>
            </select> <br>

            <!--            方式一：使用标签label,让点击文件input也有焦点,for对应的是id不是name-->
            <label for="zhanghu2">账户2：</label><input type="text" id="zhanghu2" name="account2" maxlength="10"> <br>
            <!--            方式二：把input写入label里面也可以关联，radio,checkbox都行-->
            <label>账户3：<input type="text" id="zhanghu3" name="account3" maxlength="10"></label> <br>

        </fieldset>

        <!--            <button type="submit">确认</button>-->
        <!--            将input变成submit按钮,submit不要写name,写了就会把按钮带过去,button也不要写name-->
        <input type="submit" value="确认">

        <!--            重置按钮,type reset ,点击后页面变回默认-->
        <!--            <button type="reset">重置</button>-->
        <input type="reset" value="重置">
        <!--            type button就不会提交表单了-->
        <button type="button">检测账户是否被注册</button>
    </form>

</div>
</body>
</html>